light mode
night mode
অ্যাজাক্স (Ajax)

উদাহরণ সহ Ajax এবং MySQL এর সংযোগ

Web Development - অ্যাজাক্স (Ajax) - Ajax এবং Database Interaction (Ajax এবং ডাটাবেস ইন্টিগ্রেশন) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এবং MySQL এর সংযোগ করা একটি সাধারণ এবং কার্যকর পদ্ধতি, যা ওয়েব অ্যাপ্লিকেশনকে ডাইনামিক এবং ইন্টারেক্টিভ করে তোলে। Ajax এর মাধ্যমে ডেটা ক্লায়েন্ট সাইড থেকে PHP স্ক্রিপ্টে পাঠানো হয়, যেখানে PHP MySQL ডাটাবেসে কুয়েরি চালায় এবং প্রাপ্ত ফলাফল Ajax এর মাধ্যমে ব্রাউজারে ফেরত পাঠায়।

উদাহরণ: Ajax এবং MySQL এর সংযোগ

১. HTML এবং JavaScript (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax and MySQL Connection Example</title>
</head>
<body>
    <h1>Employee Data Search</h1>
    <form id="employeeForm">
        <label for="employeeId">Enter Employee ID:</label>
        <input type="number" id="employeeId" name="employeeId" required>
        <button type="button" onclick="fetchEmployeeData()">Search</button>
    </form>

    <div id="response-container">
        <!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
    </div>

    <script>
        function fetchEmployeeData() {
            var employeeId = document.getElementById('employeeId').value;

            // XMLHttpRequest অবজেক্ট তৈরি করা
            var xhr = new XMLHttpRequest();

            // POST রিকোয়েস্ট ওপেন করা
            xhr.open("POST", "fetch_employee.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            // রেসপন্স হ্যান্ডলিং সেট করা
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("response-container").innerHTML = xhr.responseText;
                    } else {
                        document.getElementById("response-container").innerHTML = "Error fetching data.";
                    }
                }
            };

            // ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
            xhr.onerror = function() {
                document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
            };

            // রিকোয়েস্ট পাঠানো
            xhr.send("employeeId=" + encodeURIComponent(employeeId));
        }
    </script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML ফাইলে একটি ফর্ম রয়েছে, যেখানে ইউজার এমপ্লয়ির আইডি দিয়ে সার্চ করতে পারে।
  • "Search" বোতামে ক্লিক করলে fetchEmployeeData() ফাংশন কল হবে, যা Ajax POST রিকোয়েস্ট পাঠিয়ে PHP স্ক্রিপ্টে ডেটা পাঠাবে।
  • response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে PHP স্ক্রিপ্ট থেকে প্রাপ্ত রেসপন্স বা ত্রুটি মেসেজ দেখানো হবে।

২. PHP স্ক্রিপ্ট (fetch_employee.php):

<?php
// ডাটাবেস কানেকশন সেটআপ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500); // Internal Server Error
    echo "Database connection failed.";
    exit();
}

// ইনপুট ডেটা সংগ্রহ করা
$employeeId = intval($_POST['employeeId']);

// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees WHERE id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $employeeId);
$stmt->execute();
$result = $stmt->get_result();

// রেসপন্স তৈরি করা
if ($result->num_rows > 0) {
    $employee = $result->fetch_assoc();
    echo "<h2>Employee Details:</h2>";
    echo "<p>Name: " . htmlspecialchars($employee['name']) . "</p>";
    echo "<p>Email: " . htmlspecialchars($employee['email']) . "</p>";
    echo "<p>Department: " . htmlspecialchars($employee['department']) . "</p>";
} else {
    echo "No employee found with ID: " . htmlspecialchars($employeeId);
}

// কানেকশন বন্ধ করা
$stmt->close();
$conn->close();
?>

বিস্তারিত ব্যাখ্যা:

  1. ডাটাবেস কানেকশন:
    • PHP স্ক্রিপ্টে ডাটাবেস কানেকশন সেটআপ করা হয়েছে এবং MySQL সার্ভারের সাথে কানেক্ট করা হয়েছে।
    • যদি কানেকশন ব্যর্থ হয়, তাহলে একটি ত্রুটি মেসেজ এবং HTTP স্ট্যাটাস কোড 500 রিটার্ন করা হয়েছে।
  2. SQL কুয়েরি:
    • SELECT কুয়েরি ব্যবহার করে employees টেবিল থেকে name, email, এবং department কলামগুলো ফেচ করা হয়েছে।
    • prepare() এবং bind_param() মেথড ব্যবহার করে কুয়েরি প্রিপেয়ার করা হয়েছে এবং ইনপুট প্যারামিটার সিকিউরলি বাউন্ড করা হয়েছে।
  3. রেসপন্স তৈরি:
    • যদি ডেটা পাওয়া যায়, তাহলে HTML ফরম্যাটে আউটপুট তৈরি করে রেসপন্স দেখানো হয়েছে।
    • যদি কোনো ডেটা না পাওয়া যায়, তাহলে একটি মেসেজ দেখানো হয়েছে যে সেই আইডির কোনো এমপ্লয়ি পাওয়া যায়নি।

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

  1. JavaScript এবং HTML:
    • ব্যবহারকারী যখন ফর্মে এমপ্লয়ির আইডি প্রবেশ করে এবং "Search" বোতামে ক্লিক করে, তখন fetchEmployeeData() ফাংশন কল হয়।
    • ফাংশনটি একটি Ajax POST রিকোয়েস্ট পাঠায় fetch_employee.php এ, যেখানে ইনপুট ডেটা (employeeId) পাঠানো হয়।
  2. PHP স্ক্রিপ্ট:
    • PHP স্ক্রিপ্ট ডাটাবেস থেকে ইনপুট অনুযায়ী ডেটা ফেচ করে এবং HTML ফরম্যাটে আউটপুট রিটার্ন করে।
  3. JavaScript Response Handling:
    • Ajax রিকোয়েস্ট সফল হলে, PHP স্ক্রিপ্ট থেকে প্রাপ্ত HTML ডেটা response-container ডিভে ইনজেক্ট করা হয়।

Ajax এবং MySQL এর মাধ্যমে ডেটা ফেচ করার সুবিধা:

  • পেজ রিফ্রেশ ছাড়াই ডেটা আপডেট: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডাটাবেস থেকে ডেটা ফেচ এবং প্রদর্শন করা যায়।
  • Dynamic এবং Interactive User Interface: Ajax এবং PHP এর মাধ্যমে রিয়েল-টাইমে ডেটা ফেচ এবং টেবিলে প্রদর্শন করে ওয়েব পেজকে আরও ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি করা যায়।
  • JSON বা HTML ফরম্যাটে রেসপন্স: PHP স্ক্রিপ্ট JSON বা HTML ফরম্যাটে রেসপন্স দিতে পারে, যা JavaScript এর মাধ্যমে প্রসেস এবং ডিসপ্লে করা যায়।

সারসংক্ষেপ:

  • Ajax এবং PHP: Ajax এবং PHP এর মাধ্যমে MySQL ডাটাবেস থেকে ডেটা ফেচ এবং প্রদর্শন করা হয়েছে, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ করে তোলে।
  • JavaScript এবং PHP Integration: JavaScript এর মাধ্যমে Ajax POST রিকোয়েস্ট পাঠানো হয়েছে এবং PHP স্ক্রিপ্ট সার্ভারে এক্সিকিউট করে ডেটা প্রদান করেছে।
  • Dynamic Data Display: ব্যবহারকারী পেজ রিলোড ছাড়াই ডেটা দেখতে এবং ইন্টারঅ্যাক্ট করতে পারে, যা ওয়েব অ্যাপ্লিকেশনকে আরও রেসপন্সিভ এবং ইন্টারেক্টিভ করে তোলে।

আরও দেখুন...

উদাহরণ সহ Ajax এবং MySQL এর সংযোগ

or

Don't have an account? Register

Promotion